<template>
    <div>
        <el-row>
            <el-col :span="5">
                <div class="grid-content bg-purple">
                    <p>车位名:</p>
                    <el-input v-model="souSuo.parkname" placeholder="请输入车位名" width="100%"></el-input>
                    <p>车位金额:</p>
                    <el-input v-model="souSuo.parkpay" placeholder="请输入车位金额" width="100%"></el-input>
                    <p>车位类型:</p>
                    <el-select v-model="souSuo.parktype" placeholder="请选择车位类型" width="100%">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                    <p>车位状态:</p>
                    <el-select v-model="souSuo.status" placeholder="请选择车位状态" width="100%">
                        <el-option v-for="item in optionsa" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                    <el-divider></el-divider>
                    <el-button type="primary" icon="el-icon-search" @click="getData()">我马小龙天下无敌</el-button>
                    <el-button type="primary" icon="el-icon-edit" @click="sousuoCz()">重置</el-button>
                </div>
            </el-col>
            <el-col :span="18">
                <div class="grid-content bg-purple-light">
                    <div class="main-header">
                        <h3>车位列表</h3>
                        <el-button type="primary" icon="el-icon-plus" @click="add()">新增</el-button>
                    </div>
                    <div>
                        <el-table :data="tableData" height="250" border style="width: 100%">
                            <el-table-column type="index" label="序号" width="50">
                            </el-table-column>
                            <el-table-column prop="parkname" label="车位名称" width="180" sortable>
                            </el-table-column>
                            <el-table-column prop="parkpay" label="车位金额" sortable>
                            </el-table-column>
                            <el-table-column label="车位类型" width="180">
                                <template slot-scope="scope">
                                    <el-tooltip :content="'parktype: ' + scope.row.parktype" placement="top">
                                        <el-switch v-model="scope.row.parktype" :active-value=1 :inactive-value=2
                                            active-text="地下" inactive-text="地上" @change="setType(scope.row)">
                                        </el-switch>
                                    </el-tooltip>
                                </template>
                            </el-table-column>
                            <el-table-column label="车位状态" width="180">
                                <template slot-scope="scope">
                                    <el-tooltip :content="'parkstatus: ' + scope.row.parkstatus" placement="top">
                                        <el-switch v-model="scope.row.parkstatus" :active-value=1 :inactive-value=2
                                            active-text="已有车" inactive-text="未有车" @change="setType(scope.row)">
                                        </el-switch>
                                    </el-tooltip>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="300">
                                <template slot-scope="scope">
                                    <el-button icon="el-icon-share" :disabled="true">分配车位</el-button>
                                    <el-button icon="el-icon-edit" @click="bianJ(scope.row)">编辑</el-button>
                                    <el-button icon="el-icon-delete" @click="handleDel(scope.row)">移除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <Pagination :page="queryInfo.currPage" :rows="queryInfo.pageNum" :totalCount="totalCount"
                            @changeRow="goRows" @changePage="setPage"></Pagination>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-dialog :title="title" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
            <el-form :model="adminForm" ref="adminForm" label-width="100px" class="demo-ruleForm">
                <!-- prop 做校验的时候必须加上 -->
                <el-form-item label="车位名称">
                    <el-input v-model="adminForm.parkname"></el-input>
                </el-form-item>
                <el-form-item label="车位金额">
                    <el-input v-model="adminForm.parkpay"></el-input>
                </el-form-item>
                <el-form-item label="车位类型">
                    <el-select v-model="adminForm.parktype" placeholder="请选择">
                        <el-option v-for="(item, index) in parkType" :key="index" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="车位状态">
                    <el-select v-model="adminForm.parkstatus" placeholder="请选择">
                        <el-option v-for="(item, index) in oStatus" :key="index" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click="handleClose()">取消</el-button>
                    <el-button v-if="title == '车位修改'" type="primary" @click="bianjiTrue('adminForm')">保存</el-button>
                    <el-button v-if="title == '车位增加'" type="primary" @click="tianjiaTrue('adminForm')">提交</el-button>
                    <el-button type="primary" @click="chongZhi()">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import Pagination from '@/components/pagination/index.vue';
export default {
    data() {
        return {
            queryInfo: {
                currPage: 0,
                pageNum: 9,
                parkname: '',
                parkpay: '',
                parktype: '',
                parkstatus: ''
            },
            souSuo: {},
            isOk: true,
            totalCount: 0,
            adminForm: [],
            title: '',
            dialogVisible: false,
            tableData: [],
            oStatus: [
                {
                    label: '未有车',
                    value: 1
                },
                {
                    label: '已有车',
                    value: 2
                },
            ],
            parkType: [
                {
                    label: '地上',
                    value: 1
                },
                {
                    label: '地下',
                    value: 2
                },
            ],
            options: [
                {
                    label: '地上',
                    value: 2
                },
                {
                    label: '地下',
                    value: 1
                },
            ],
            optionsa: [
                {
                    label: '未有车',
                    value: 2
                },
                {
                    label: '已有车',
                    value: 1
                },
            ]
        }
    },
    methods: {
        getData() {
            this.$Axios({
                url: '/parking/getParkData',
                method: 'get',
                data: this.queryInfo,
                success: (res) => {
                    this.tableData = []
                    this.totalCount = ''
                    this.tableData = res.data
                    this.totalCount = res.total;
                    console.log(this.tableData)
                }
            })
        },
        goRows(res) {
            this.queryInfo.pageNum = res;
            this.getData();
        },
        sousuoCz() {
            this.souSuo = {}
        },
        setPage(res) {
            this.queryInfo.currPage = res;
            this.getData();
        },
        setType(res) {
            this.$Axios({
                url: '/parking/editParkData',
                method: 'post',
                data: {
                    u_id: res.id,
                    parkname: res.parkname,
                    parkpay: res.parkpay,
                    parktype: res.parkpay,
                    parkstatus: res.parkstatus,
                },
                headers: {
                    token: sessionStorage.getItem("token"),
                },
                success: (res) => {
                    this.$message('修改数据成功')
                    this.getData()
                }
            })
        },
        bianJ(row) {
        this.adminForm=[]
            this.adminForm = row
            this.dialogVisible = true
            this.title = '车位修改'
        },
        bianjiTrue() {
            this.$Axios({
                url: '/parking/editParkData',
                method: 'post',
                data: {
                    u_id: this.adminForm.id,
                    parkname: this.adminForm.parkname,
                    parkpay: this.adminForm.parkpay,
                    parktype: this.adminForm.parktype,
                    parkstatus: this.adminForm.parkstatus,
                },
                headers: {
                    token: sessionStorage.getItem("token"),
                },
                success: (res) => {
                    this.$message('修改数据成功')
                    this.dialogVisible = false
                    this.getData()
                }
            })
        },
        add() {
            this.adminForm = {
                parkname: '',
                parkpay: '',
                parktype: '',
                parkstatus: '',
            }
            this.dialogVisible = true
            this.title = '车位增加'
        },
        tianjiaTrue() {
            this.$Axios({
                url: '/parking/addParkData',
                method: 'post',
                data: this.adminForm,
                headers: {
                    token: sessionStorage.getItem("token"),
                },
                success: (res) => {
                    this.$message('修改添加成功')
                    this.dialogVisible = false
                    this.getData()
                }
            })
        },
        handleDel(row) {
            this.$confirm('此操作将删除该用户信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 如果用户点击了确认删除 则调用真正的删除函数
                this.shanchuTrue(row)
                // console.log(row.id,'删除id');
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        shanchuTrue(res) {
            this.$Axios({
                url: '/parking/delParkData',
                method: 'get',
                data:  {
                    id:res.id
                },
                headers: {
                    token: sessionStorage.getItem("token"),
                },
                success: (res) => {
                    this.$message('s成功')
                    this.getData()
                }
            })
        },
        chongZhi(){
            this.adminForm=[]
        },
        handleClose() {
            this.dialogVisible = false
        },
    },
    components: {
        Pagination
    },
    created() {
        this.getData();
        let token = sessionStorage.token;
    }
}
</script>
<style scoped>
p {
    margin: 20px 0 5px 0;
    font-size: 14px;
}

.el-input {
    width: 100%;
}

.el-select {
    width: 100%;
}

.main-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.el-row {
    display: flex;
    justify-content: space-between;
}

.el-col:nth-child(2) {
    margin-top: 10px;
}

.el-table {
    text-align: center;
}
</style>